<template>
    <div class='register'>
        <!-- <van-uploader :after-read="afterRead" /> -->
        <van-uploader v-model="fileList" multiple :after-read="afterRead" />

        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="userName"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                v-model="nickname"
                name="nickName"
                label="昵称"
                placeholder="昵称"
                :rules="[{ required: true, message: '请填写昵称' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import {regApi} from "../../api/user"
// Toast是模块中的方法
import {Toast} from "vant"
export default {
    
    components: {},
    data() {
        return {
            username: '',
            password: '',
            nickname: "",
            fileList: [],
            imgUrl: "",
        }
    },
    computed: {},
    watch: {
        uploader(){
            console.log();
        }
    },
    
    methods: {
        // 表单提交按钮
        async onSubmit(values) {
            console.log('submit', values);
            if(this.imgUrl){
                // 收集数据发送请求
                const result = await regApi({...values, avatar: this.imgUrl});
                console.log(result);
                //将用户名  密码  头像 等 存取到本地 
                localStorage.setItem("reg", result.config.data);
                // const username = result.config.data.userName;
                // console.log(username)
                
                if(result.data.code == "success"){
                    Toast.success("注册成功");
                    this.$router.push("/login")
                }
            }else{
                Toast.fail("请选择头像")
            }
        },
        // 第一种图片上传 上传图片获取base编码
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
            // console.log(file.content); 图片地址
            this.imgUrl = file.content;
        },
    },
    created() {
        
    },
    mounted() {
        
    },
    }
</script>
<style scoped>
    
</style>